<!-- LIST PAGE -->
<div class="container" id="list-container">
    <div class="row">
        <div class="col-md-8">
            <div class="component">
                <div class="title">
                    <div class="btn-group btn-group-sm pull-right">
                        <div class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                    translate="GENERAL.ACTION.SHOW-RESULTS"
                                    translate-value-size="{{'GENERAL.RESULT-SIZES.' + filter.resultSize | translate}}">
                                &nbsp;
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li ng-repeat="resultSize in config.filter.resultSizes"><a href=""
                                                                                           ng-click="filter.setResultSize(resultSize)">{{'GENERAL.RESULT-SIZES.'
                                    + resultSize.toString() | translate}}</a></li>
                            </ul>
                        </div>
                        <button type="button" class="btn btn-default" ng-click="filter.toggleOrder()">
                            <i class="glyphicon"
                               ng-class="{'glyphicon-sort-by-attributes': filter.order == 'asc', 'glyphicon-sort-by-attributes-alt': filter.order == 'desc'}"></i>
                        </button>
                    </div>
                    <div class="btn-group btn-group-sm pull-right">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                translate="GENERAL.ACTION.SORT-BY" translate-value-sort="{{filter.sort.name | translate}}">
                            &nbsp;
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                           <li ng-repeat="sort in filter.sortObjects"><a href="" ng-click="filter.setSort(sort)">{{sort.name | translate}}</a></li>
                        </ul>
                    </div>
                    <div class="btn-group btn-group-sm pull-right">
                        <a class="btn btn-default" role="button"
                           title="{{'GENERAL.ACTION.REFRESH-LIST' | translate}}"
                           ng-click="filter.refresh();">
                            <i class="glyphicon glyphicon-refresh"></i>
                        </a>
                    </div>
                    <div class="pull-right loading" ng-show="filter.loading">
                        <i class="glyphicon glyphicon-refresh"></i>
                    </div>
                    <h2 translate="CMMN-DEPLOYMENTS.TITLE"></h2>
                </div>

                <div class="grid-wrapper" id="deployments">
                    <div class="grid-message" ng-if="cmmnDeploymentsData.size > 0">
                        <span>{{'CMMN-DEPLOYMENTS.LIST-MESSAGE' | translate:cmmnDeploymentsData}}</span>
                    </div>
                    <div class="grid-message" ng-if="deploymentsData.size == 0">
                        <span>{{'CMMN-DEPLOYMENTS.LIST-MESSAGE-EMPTY' | translate}}</span>
                    </div>
                    <div ng-grid="gridCmmnDeployments" class="gridStyle"
                         ng-if="gridCmmnDeployments && cmmnDeploymentsData.data"/>
                </div>
            </div>
        </div>
        <div class="col-md-4">

            <!-- Deployment filters -->
            <div class="component tip-left">
                <div class="title">
                    <div class="pull-right">
                        <a class="action" ng-click="filter.clear()" translate="GENERAL.ACTION.CLEAR-FILTERS"></a>
                    </div>
                    <h2 translate="GENERAL.TITLE.FILTERS"></h2>
                </div>
                <div class="section" ng-if="filter.properties.nameLike !== undefined">
                    <div class="subtitle"><label for="filter-nameLike" translate="CMMN-DEPLOYMENTS.FILTER.NAME"></label>
                    </div>
                    <div class="input-group input-group-sm">
                        <input id="filter-nameLike" type="text" class="form-control" value=""
                               ng-model="filter.properties.nameLike" ng-change="filter.refreshDelayed()">
                    </div>
                </div>
                <div class="section" ng-if="filter.properties.tenantIdLike !== undefined">
                    <div class="subtitle"><label for="filter-tenantIdLike"
                                                 translate="CMMN-DEPLOYMENTS.FILTER.TENANTID"></label></div>
                    <div class="input-group input-group-sm">
                        <input id="filter-tenantIdLike" type="text" class="form-control" value=""
                               ng-model="filter.properties.tenantIdLike" ng-change="filter.refreshDelayed()">
                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div class="component no-min-height">
                <div class="title">
                    <h2 translate="GENERAL.TITLE.ACTIONS"></h2>
                </div>
                <ul class="list-group">
                    <li>
                        <button type="button" class="btn btn-sm btn-default" ng-click="uploadDeployment()">
                            <i class="glyphicon glyphicon-open"></i>{{'CMMN-DEPLOYMENTS.ACTION.UPLOAD' | translate}}
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>